<template>
  <div class="error-page" :class="`error-${errorType}`">
    <!-- 背景装饰元素 -->
    <div class="decoration sakura" v-for="i in 12" :key="`sakura-${i}`"></div>
    <div class="decoration sparkle" v-for="i in 8" :key="`sparkle-${i}`"></div>

    <!-- 主要内容区 -->
    <div class="error-container">
      <!-- 动态角色插图 -->
      <transition name="fade">
        <el-image
            :src="currentIllustration"
            class="character-illustration"
            :class="{ 'glitch-effect': showGlitch }"
        />
      </transition>

      <!-- 错误信息 -->
      <div class="error-content">
        <h1 class="error-title">
          <span class="error-code">{{ errorCode }}</span>
          {{ errorTitle }}
        </h1>

        <p class="error-message">
          {{ errorMessage || defaultMessages[errorType] }}
        </p>

        <div class="error-details" v-if="errorDetails">
          <el-collapse>
            <el-collapse-item title="错误详情">
              <pre>{{ errorDetails }}</pre>
            </el-collapse-item>
          </el-collapse>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <el-button
              type="primary"
              @click="handleRetry"
              class="neon-button"
          >
            <el-icon><Refresh /></el-icon>
            <span>重试</span>
          </el-button>

          <el-button
              @click="goHome"
              class="neon-button secondary"
          >
            <el-icon><HomeFilled /></el-icon>
            <span>返回首页</span>
          </el-button>

          <el-button
              v-if="showReport"
              @click="reportError"
              class="neon-button report-button"
          >
            <el-icon><Warning /></el-icon>
            <span>报告问题</span>
          </el-button>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <div class="error-footer">
      <p>遇到问题？联系 <a @click="contactSupport">客服娘</a></p>
      <p class="copyright">© 2024 Anime System - 二次元的力量</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import {
  Refresh,
  HomeFilled,
  Warning
} from '@element-plus/icons-vue'

const props = defineProps({
  errorType: {
    type: String,
    validator: (val) => ['404', '403', '500', 'offline', 'maintenance'].includes(val)
  },
  errorCode: {
    type: String,
    default: ''
  },
  errorTitle: {
    type: String,
    default: ''
  },
  errorMessage: {
    type: String,
    default: ''
  },
  errorDetails: {
    type: String,
    default: ''
  },
  showReport: {
    type: Boolean,
    default: true
  }
})
const route = useRoute()
const errorType = computed(() => route.query.errorType || props.errorType || '404')
const errorCode = computed(() => route.query.errorCode || props.errorCode || '404')

const router = useRouter()
const showGlitch = ref(false)

// 默认错误信息
const defaultMessages = {
  '404': '页面不见了',
  '403': '您没有权限访问这个页面!',
  '500': '这里好像出问题了! 需要稍后重试!',
  'offline': '网络连接丢失! 请检查您的互联网连接.',
  'maintenance': '系统维护中! 请稍后再试!'
}

// 动态错误img
import Error404Illustration from '@/assets/illustrat/404.png'
import Error500Illustration from '@/assets/illustrat/500.png'
import Error403Illustration from '@/assets/illustrat/403.png'
import DefaultErrorIllustration from '@/assets/illustrat/error.png'
// 动态选择插图
const currentIllustration = computed(() => {
  const illustrations = {
    '404': Error404Illustration,
    '403': Error500Illustration,
    '500': Error403Illustration,
    'default': DefaultErrorIllustration
  }
  return illustrations[errorType] || illustrations.default
})

// 动态错误标题
const computedErrorTitle = computed(() => {
  return props.errorTitle || {
    '404': '页面消失啦~',
    '403': '禁止进入!',
    '500': '服务器崩溃了!',
    'offline': '网络连接丢失',
    'maintenance': '维护进行中'
  }[errorType]
})

// 添加故障效果
const triggerGlitch = () => {
  showGlitch.value = true
  setTimeout(() => {
    showGlitch.value = false
  }, 800)
}

// 重试操作
const handleRetry = () => {
  triggerGlitch()
  emit('retry')
}

// 返回首页
const goHome = () => {
  router.push('/')
}

// 报告问题
const reportError = () => {
  // 这里可以集成错误报告系统
  console.error('Error reported:', props.errorDetails)
  ElMessage.success('问题已报告给管理员!')
}

// 联系客服
const contactSupport = () => {
  window.open('mailto:support@anime.com?subject=错误报告')
}

// 随机初始化装饰元素位置
onMounted(() => {
  // 可以在这里添加动画初始化逻辑
})
</script>

<style scoped lang="scss">
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes sparkle {
  0% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0); }
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-5px, 5px); }
  40% { transform: translate(-5px, -5px); }
  60% { transform: translate(5px, 5px); }
  80% { transform: translate(5px, -5px); }
  100% { transform: translate(0); }
}

.error-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fef6f9;
  overflow: hidden;
  padding: 20px;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;

  &.error-404 {
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%);
  }

  &.error-500 {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
  }

  &.error-403 {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  }

  .decoration {
    position: absolute;
    z-index: 0;

    &.sakura {
      width: 30px;
      height: 30px;
      background-size: contain;
      opacity: 0.6;
      animation: float 6s ease-in-out infinite;

      @for $i from 1 through 12 {
        &:nth-child(#{$i}) {
          top: random(100) + '%';
          left: random(100) + '%';
          animation-delay: random(5) + s;
          transform: rotate(random(360) + deg);
        }
      }
    }

    &.sparkle {
      width: 15px;
      height: 15px;
      background-color: #fff;
      border-radius: 50%;
      filter: blur(1px);
      animation: sparkle 2s ease-in-out infinite;

      @for $i from 1 through 8 {
        &:nth-child(#{$i}) {
          top: random(100) + '%';
          left: random(100) + '%';
          animation-delay: random(3) + s;
        }
      }
    }
  }
}

.error-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

  .character-illustration {
    width: 300px;
    height: auto;
    margin-right: 50px;
    transition: all 0.3s ease;

    &.glitch-effect {
      animation: glitch 0.5s linear;
      filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.5));
    }
  }
}

.error-content {
  flex: 1;
  min-width: 300px;

  .error-title {
    font-size: 2.5rem;
    color: #ff6b81;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    font-weight: 700;

    .error-code {
      display: inline-block;
      background-color: #ff6b81;
      color: white;
      padding: 0 15px;
      border-radius: 8px;
      margin-right: 15px;
      font-size: 2rem;
    }
  }

  .error-message {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.6;
  }
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 30px;

  .neon-button {
    position: relative;
    overflow: hidden;
    border: none;
    font-weight: bold;
    transition: all 0.3s;
    padding: 12px 24px;

    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

      &::before {
        opacity: 1;
      }
    }

    &::before {
      content: '';
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
      background: linear-gradient(
              45deg,
              #ff6b81, #ff8e53, #ff6b81
      );
      background-size: 200%;
      z-index: -1;
      opacity: 0;
      transition: 0.5s;
      animation: neon 3s linear infinite;
    }

    &.secondary::before {
      background: linear-gradient(
              45deg,
              #6b81ff, #538eff, #6b81ff
      );
    }

    &.report-button::before {
      background: linear-gradient(
              45deg,
              #ff6b6b, #ff5353, #ff6b6b
      );
    }

    @keyframes neon {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
  }
}

.error-footer {
  margin-top: 50px;
  text-align: center;
  color: #888;
  font-size: 0.9rem;

  a {
    color: #ff6b81;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .error-container {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;

    .character-illustration {
      margin-right: 0;
      margin-bottom: 30px;
      width: 200px;
    }
  }

  .error-title {
    justify-content: center;
  }

  .action-buttons {
    justify-content: center;
  }
}
</style>
